import React from 'react'
import clsx from 'clsx'
import styles from './styles.module.css'
import DevProgress from '@site/src/components/mobile/DevProgress'
import blankPhone from '/static/img/system-main.png'
import MobileBackground from '@site/src/components/mobile/MobileBackground'
import Translate from '@docusaurus/Translate'
import videoPath from '/static/video/key-emulation.mp4'
import VideoPlayer from '@site/src/components/VideoPlayer'

export default function MobileControlBar(): React.JSX.Element {
  const progressValue = 50

  return (
    <header className={clsx('hero shadow--lw', styles.heroBanner)}>
      <div className="container">
        <div className="row">
          <div className={clsx('col col--5')}>
            <div className="row">
              <div className={clsx('col col--9')}>
                <VideoPlayer videoPath={videoPath} />
              </div>
            </div>
          </div>
          <div className={clsx('col col--6', styles.left_column)}>
            <div className={clsx('row')}>
              <div className="col">
                <p className="hero__title">
                  <Translate
                    id="component.mobile.MobileControlBar.title"
                    description="about PolyOS Mobile QEMU Control Bar">
                    Control Bar
                  </Translate>
                </p>
                <p className={clsx('hero__subtitle', styles.subtext)}>
                  <Translate
                    id="component.mobile.MobileControlBar.text"
                    description="about PolyOS Mobile QEMU Control Bar">
                    The QEMU provided by the PolyOS community
                    introduces a GTK floating toolbar, incorporating
                    an array of interactive buttons to emulate
                    physical buttons on mobile devices.
                  </Translate>
                </p>
              </div>
            </div>
            <div className={clsx('row')}>
              <div className="col --12">
                <DevProgress
                  progress={progressValue}
                  link="/community"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}
